<template>
    <view>
        <!--新建任务-->
		<uni-popup id="dialogInput" ref="dialogCreateJob" type="dialog" @change="change">
			<view style="width: 100%; background: #fff; padding: 5px 20px; border-radius: 15px;" class="createPop">
				<view style="text-align: center; margin: 15px 0px; color: #007aff; font-size: 18px; font-weight: 400"> 新建任务 </view>
				<form @submit="submit" style="font-size: 14px">
					<view class="title-p">
						<span>所属模块： </span><span style="color: #f0ad4e; padding-left: 10px ">{{moduleSel.name}}</span>
					</view>
					<view class="uni-form-item uni-column" style="margin-bottom: 0px; display: flex; flex-direction: row; ">
						<view class="title" style="flex: 0 0 60px; padding-top: 20px">任务名:</view>
						<input class="uni-input" style="flex: 1; height: 60px; color: rgb(0, 122, 255); font-size: 13px" 
                            v-model="newTask.name" placeholder-style="color: #ddd" placeholder="请输入任务名" />
					</view>
					<!--多人协作-->
					<view class="title-p">
						<span style="padding-top:5px">多人协作： </span>
						<switch color="#007aff" :checked="newTask.multi" @change="changeMulti" style="transform:scale(0.7)"/>
						<span style="color:#aaa; padding-left: 10px; padding-top:10px; font-family: 楷体; font-size: 12px">
							多人任务将共享进度
						</span>
					</view>
                    <!-- 执行者 -->
                    <view class="title-p" v-show="!newTask.multi">
                        <view class="title-p">
                            <span style="padding-top: 5px">指派给：</span>
                            <picker mode="selector" :range="userList" range-key="realName" @change="changeUser"
                                style="color: #007aff; margin: 4px 0px 2px 6px; font-size: 14px">
								{{userSel.realName}}
							</picker>
                        </view>
                    </view>
					<!--预计时间-->
					<view class="title-p">
						<span style="padding-top: 5px">完成时间： </span>
						<span style="padding-top: 5px; padding-left: 10px; color: #007aff">
							<picker mode="date" :value="newTask.date"   @change="taskDateChange">
								<view class="uni-input">{{newTask.date}}</view>
							</picker>
						</span>
					</view>

					<view class="uni-form-item uni-column" style="margin: 20px 0px">
						<view class="title">描述:</view>
						<view class="uni-textarea" style="border: 1px solid #eee">
							<textarea placeholder-style="color: #ddd" v-model="newTask.description"
								style="height: 65px; font-size: 14px" placeholder="任务描述"/>
						</view>
					</view>

					<view style="text-align: center; flex-direction: row; margin-bottom: 15px">
						<button class="mini-btn" type="default" size="mini" @click="cancelCreateTask">取消</button>
						<button class="mini-btn" type="primary" size="mini" @click="createTask">提交</button>
					</view>
				</form>
			</view>
		</uni-popup>

        <!-- ==================================================== 任务菜单 =================================================== -->
        <!-- 修改任务名 -->
        <uni-popup id="dialogTaskName" ref="dialogChangeTaskName" type="dialog">
			<view style="width: 100%; background: #fff; padding: 5px 20px; border-radius: 15px;" class="createPop">
				<view style="text-align: center; margin: 10px 0px; color: #007aff; font-size: 18px; font-weight: 400"> 修改任务名 </view>
				<form style="font-size: 14px">
					<view class="uni-form-item uni-column" style="margin-bottom: 0px; display: flex; flex-direction: row; ">
						<input class="uni-input" style="flex: 1; height: 60px; color: #777" v-model="taskSel.name"
							placeholder-style="color: #ddd" placeholder="请输入任务名" />
					</view>
                </form>
                <view style="text-align: center; flex-direction: row; margin-bottom: 15px; margin-top: 20px">
                    <button class="mini-btn" type="default" size="mini" @click="cancel('dialogChangeTaskName')">取消</button>
                    <button class="mini-btn" type="primary" size="mini" @click="changeTaskName">提交</button>
                </view>
            </view>
        </uni-popup>

        <!-- 变更计划时间 -->
        <uni-popup id="dialogTaskTime" ref="dialogChangePlan" type="dialog">
			<view style="width: 100%; background: #fff; padding: 5px 20px; border-radius: 15px;" class="createPop">
				<view style="text-align: center; margin: 10px 0px; color: #007aff; font-size: 18px; font-weight: 400"> 变更任务期限 </view>
				<form style="font-size: 14px">
                    <view class="title-p">
                        <span style="padding-top: 5px">任务：</span>
						<span class="content">{{taskSel.name}}</span>
                    </view>
					<view class="title-p">
						<span style="padding-top: 5px">原定日期： </span>
						<span class="content">{{taskSel.planEndTime.substr(0,10)}}</span>
					</view>
                    <view class="title-p">
						<span style="padding-top: 5px">修正时间： </span>
						<span style="padding-top: 5px; padding-left: 10px; color: #007aff">
							<picker mode="date" :value="taskSel.newTime" @change="taskDateChange2">
								<view class="uni-input">{{taskSel.newTime}}</view>
							</picker>
						</span>
					</view>
                    <view class="title-p">
						<span style="padding-top: 5px">进度修正： </span>
						<span class="content" style="min-width: 100px">
                            <picker @change="pickerChange" :value="taskSel.newProgress" :range="taskSel.range">
                                <view class="uni-input">{{taskSel.newProgress}}%</view>
                            </picker>
                        </span>
					</view>
                    <view class="title-p">
                        <span style="padding-top: 5px">变更原因：</span>
                        <view style="flex: 1; padding-top: 6px; padding-left: 6px">
                            <input class="uni-input" v-model="taskSel.reason" style="font-size: 13px; color: #666"
                                placeholder-style="color: #ddd" placeholder="请输入变更原因" />
                        </view>
                    </view>
                </form>
                <view style="text-align: center; flex-direction: row; margin-bottom: 15px; margin-top: 20px">
                    <button class="mini-btn" type="default" size="mini" @click="cancel('dialogChangePlan')">取消</button>
                    <button class="mini-btn" type="primary" size="mini" @click="changeTaskPlan">提交</button>
                </view>
            </view>
        </uni-popup>

        <!-- 关闭任务 -->
        <uni-popup id="dialogTaskName" ref="dialogCloseTask" type="dialog">
			<view style="width: 100%; background: #fff; padding: 5px 20px; border-radius: 15px;" class="createPop">
				<view style="text-align: center; margin: 10px 0px; color: #007aff; font-size: 18px; font-weight: 400"> 关闭任务 </view>
                <form style="font-size: 14px">
                    <view class="title-p">
                        <span style="padding-top: 5px">任务：</span>
                        <span class="content">{{taskSel.name}}</span>
                    </view>
                    <view class="title-p">
                        <span style="padding-top: 5px">原因：</span>
                        <view style="flex: 1; padding-top: 6px; padding-left: 6px">
                            <input class="uni-input" v-model="taskSel.reason" style="font-size: 13px; color: rgb(212,35,122)"
                                placeholder-style="color: #ddd" placeholder="请输入任务终止原因" />
                        </view>
                    </view>
                </form>
                <view style="text-align: center; flex-direction: row; margin-bottom: 15px; margin-top: 20px">
                    <button class="mini-btn" type="default" size="mini" @click="cancel('dialogCloseTask')">取消</button>
                    <button class="mini-btn" type="primary" size="mini" @click="closeTask">提交</button>
                </view>
            </view>
        </uni-popup>

        <!-- 正常结束任务 -->
        <uni-popup id="dialogTaskName" ref="dialogFinishTask" type="dialog">
			<view style="width: 100%; background: #fff; padding: 5px 20px; border-radius: 15px;" class="createPop">
				<view style="text-align: center; margin: 10px 0px; color: #007aff; font-size: 18px; font-weight: 400"> 完成任务 </view>
                <form style="font-size: 14px">
                    <view style="font: cursive; margin: 5px; color: #e88">* 仅用于实际已完成的任务</view>
                    <view class="title-p">
                        <span style="padding-top: 5px">任务名称：</span>
                        <span class="content">{{taskSel.name}}</span>
                    </view>
                    <view class="title-p">
						<span style="padding-top: 5px">完成时间： </span>
						<span style="padding-top: 5px; padding-left: 10px; color: #f00">
							<picker mode="date" :value="taskSel.realTime" @change="taskDateChange3">
								<view class="uni-input">{{taskSel.realTime}}</view>
							</picker>
						</span>
					</view>
                    <view class="title-p">
                        <span style="padding-top: 5px">具体描述：</span>
                        <view style="flex: 1; padding-top: 6px; padding-left: 6px">
                            <input class="uni-input" v-model="taskSel.mark" style="font-size: 13px; color: #444 "
                                placeholder-style="color: #ddd" placeholder="请输入相关说明或'已完成'" />
                        </view>
                    </view>
                </form>
                <view style="text-align: center; flex-direction: row; margin-bottom: 15px; margin-top: 20px">
                    <button class="mini-btn" type="default" size="mini" @click="cancel('dialogFinishTask')">取消</button>
                    <button class="mini-btn" type="primary" size="mini" @click="finishTask">提交</button>
                </view>
            </view>
        </uni-popup>

        <!-- 删除任务 -->
        <uni-popup id="dialogDelTask" ref="dialogDelTask" type="dialog">
			<view style="width: 100%; background: #fff; padding: 5px 20px; border-radius: 15px;" class="createPop">
				<view style="text-align: center; margin: 10px 0px; color: #007aff; font-size: 18px; font-weight: 400"> 删除任务 </view>
				<form style="font-size: 14px">
					<view class="title-p">
                        <a style="">是否删除：</a>
                        <a style="color: #e88">{{taskSel.name}}</a>
                    </view>
                </form>
                <view style="text-align: center; flex-direction: row; margin-bottom: 15px; margin-top: 20px">
                    <button class="mini-btn" type="default" size="mini" @click="cancel('dialogDelTask')">取消</button>
                    <button class="mini-btn" type="primary" size="mini" @click="delTask">确认</button>
                </view>
            </view>
        </uni-popup>

        <!-- 操作项目和模块·及任务 -->
        <uni-popup id="dialogPM" ref="dialogPM" type="dialog">
			<view style="width: 100%; background: #fff; padding: 5px 20px; border-radius: 15px;" class="createPop">
				<view style="text-align: center; margin: 15px 0px; color: #007aff; font-size: 18px; font-weight: 400"> {{pmOperate.title}} </view>
				<form style="font-size: 14px">
					<view class="title-p">
                        <view class="title-p">
                            <span style="padding-top: 5px">项目：</span>
                            <span class="content">{{projectSel.name}}</span>
                        </view>
                    </view>
                    <view class="title-p" v-if="moduleSel.id!=-2">
                        <view class="title-p">
                            <span style="padding-top: 5px">模块：</span>
                            <span class="content">{{moduleSel.name}}</span>
                        </view>
                    </view>
                    <view class="title-p" v-if="taskSel.id!=-2">
                        <view class="title-p">
                            <span style="padding-top: 5px">任务：</span>
                            <span class="content">{{taskSel.name}}</span>
                        </view>
                    </view>

                    <!-- 合并项目 -->
                    <view class="title-p" v-if="pmOperate.key=='projMerge' || pmOperate.key=='modMove'">
                        <view class="title-p">
                            <span style="padding-top: 5px">{{pmOperate.key=='projMerge' ? '合并' : '迁移'}}合并至：</span>
                            <picker mode="selector" :range="projectList.filter((d, i) => i > 0)" range-key="name" @change="changeProject"
                                style="color: #951c1c; margin: 4px 0px 2px 6px; font-size: 14px">
								{{mProject.name}}
							</picker>
                        </view>
                    </view>
                    <!-- 合并模块 -->
                    <view class="title-p" v-else-if="pmOperate.key=='modMerge' || pmOperate.key=='taskMove'">
                        <view class="title-p">
                            <span style="padding-top: 5px">{{pmOperate.key=='modMerge' ? '合并' : '迁移'}}至：</span>
                            <picker mode="selector" :range="moduleList" range-key="name" @change="changeModule"
                                style="color: #951c1c; margin: 4px 0px 2px 6px; font-size: 14px">
								{{mModule.name}}
							</picker>
                        </view>
                    </view>
                    <view class="title-p" v-else-if="pmOperate.key!='modRename' && pmOperate.key!='projRename'">
                        <a style="color: #951c1c; font-size: 14px;">{{pmTitle}}？</a>
                    </view>
                    <view v-else class="uni-form-item uni-column" style="margin-bottom: 0px; display: flex; flex-direction: row; ">
                        <label style="width: 60px; color: #777; line-height: 40px; height: 40px">名称：</label>
                        <input class="uni-input" style="flex: 1; height: 40px; color: #077" v-model="pmOperate.name"
                            placeholder-style="color: #ddd" placeholder="请输入新名称" />
                    </view>
                </form>
                <view style="text-align: center; flex-direction: row; margin-bottom: 15px; margin-top: 20px">
                    <button class="mini-btn" type="default" size="mini" @click="cancel('dialogPM')">取消</button>
                    <button class="mini-btn" type="primary" size="mini" @click="managePM()">确认</button>
                </view>
            </view>
        </uni-popup>
    </view>
</template>
<script>
import Utils from "../../../js/utils";

export default {
        name: 'Task',
        props: ['newTask', 'moduleSel', 'taskSel', 'projectSel', 'pmOperate', 'projectList', 'moduleList'],
		components: {

		},
		data() {
			return {
                mProject: {id: -2, name: "请选择项目"},
                mModule: {id: -2, name: "请选择模块"},
                userSel: {username: null, realName: "未选择"},
                userList: []
            }
        },
        mounted() {
            this.$set(this.userSel, 'username', Utils.getCacheSync('username'));
            this.$set(this.userSel, 'realName', Utils.getCacheSync('realName'));
            this.getUserList();
		},
        computed: {
            pmTitle () {
                if (this.pmOperate.key == 'modRename' || this.pmOperate.key == 'projRename') return "";
                let ops = {'projFinish': "完成", 'modFinish': "完成", 'projClose': "关闭", 'modClose': "关闭",
                    'projOpen': "开启", 'modOpen': "开启"}
                let cls = this.moduleSel.id == -2 ? "项目" : "模块";
                return "是否" + ops[this.pmOperate.key] + "该" + cls;
            },
            projects () {
                return this.projectList.map(d => d.name)
            }
        },
        methods: {
            getUserList () {
                let orgId = Utils.getCacheSync('orgId'); 
                Utils.ajax("/listUser", {'orgId': orgId}).then( res => {
					this.userList = res.data.filter(d => d.status.toString() == "0");
				});
            },
            // 也许并不必要，组件会自动传递
            taskDateChange (e) {
                this.$emit("date", e.detail.value);
            },
            taskDateChange2 (e) {
                this.$emit("newDate", e.detail.value);
            },
            taskDateChange3 (e) {
                this.$emit("realDate", e.detail.value);
            },
            pickerChange (e) {
                this.$emit("changeProgress", e.detail.value);
            },
            changeTaskName () {
                this.$emit("changeTaskName");
            },
            changeTaskPlan () {
                this.$emit("changePlan");
            },
            closeTask () {
                this.$emit("closeTask");
            },
            finishTask () {
                this.$emit("finishTask");
            },
            delTask () {
                this.$emit("delTask");
            },
			change () {

			},
            createTask () {
                this.$emit("createTask");
            },
            cancel (name){
                this.$refs[name].close();
            },
			cancelCreateTask () {
				this.$refs.dialogCreateJob.close();
			},
            managePM (pmOperate) {
                this.$emit("managePM", this.mProject, this.mModule);
            },
            changeProject (e) {
                const idx = e.target.value + 1;
                this.mProject = this.projectList[idx];
            },
            changeModule (e) {
                const idx = e.target.value;
                this.mModule = this.moduleList[idx];
            },
            changeUser (e) {
                const idx = e.target.value;
                this.userSel = this.userList[idx];
                this.$set(this.newTask, "executor", this.userSel.username);
            },
            changeMulti (e) {
                this.$set(this.newTask, 'multi', e.detail.value)
            }
        }
}

</script>

<style>
.title { margin-bottom: 10px; color: #888 }
.title-p { margin-bottom: 10px; color: #888; display: flex; flex-direction: row;}
.content {padding-top: 5px; padding-left: 10px; color: #444}
</style>